<template>
  <div class="reset_pass">
    <nav-bar></nav-bar>
    <el-card>
      <h2 class="title">修改密码</h2>
      <el-form :model="resetPassForm"
               status-icon
               :rules="rules"
               ref="resetPassForm"
               label-width="70px"
               class="resetPassForm">
        <el-form-item label="密码" prop="pass">
          <el-input type="password"
                    placeholder="请输入原密码"
                    v-model="resetPassForm.pass"
                    autocomplete="off"
                    show-password></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="newPass">
          <el-input type="password"
                    placeholder="请输入新密码"
                    v-model="resetPassForm.newPass"
                    autocomplete="off"
                    show-password></el-input>
        </el-form-item>

        <!--按钮-->
        <el-form-item>
          <el-button type="primary" @click="submitForm('resetPassForm')">修改</el-button>
          <el-button @click="resetForm('resetPassForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import NavBar from "components/content/navBar/NavBar";

  import {setAccount} from "network/profile";
  import {routerReplaceTimeout} from "common/Utils";

  export default {
    name: "ResetPass",
    components: {
      NavBar,
    },
    data() {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('新密码不能为空'));
        }
        const passReg = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/
        if(!passReg.test(value)) {
          callback(new Error('密码位数为6位以上并且需要包括字母（大小写）、数字、特殊符号'));
        } else {
          callback();
        }
      };
      return {
        resetPassForm: {
          pass: '',
          newPass: ''
        },
        rules: {
          pass: [
            {required: true, message: '请输入密码', trigger: 'blur' }
          ],
          newPass: [
            {required: true, validator: validatePass, trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 网络请求修改密码，修改成功后下次登录需要使用新密码
            const obj = {
              prepass: this.resetPassForm.pass,
              newpass: this.resetPassForm.newPass
            }
            setAccount(this.$store.state.userInfo.id, obj).then(res => {
              console.log(res)
              if(res.data.code) {
                this.$toast.show('修改密码成功', 'success', 1000)
                routerReplaceTimeout(this.$router, '/profile/' + this.$store.state.userInfo.id + '/setting/account')
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
  .reset_pass {
    width: 500px;
    margin: 120px auto 0;
  }

  .title {
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
    font-size: 24px;
  }

  .el-card >>> .el-card__body {
    padding: 30px 40px 40px 30px;
  }

  .resetPassForm >>> .el-button--primary {
    margin-right: 10px;
    background-color: #4361a7;
    border-color: #4361a7;
    color: #fff;
  }

  .resetPassForm >>> .el-button--primary:hover {
    background-color: #5177ce;
    border-color: #5177ce;
    color: #fff;
  }

</style>
